<template>
  <div class="icon-button" @click="emit('click')">
    <i :class="`icon icon-${props.icon}`"></i>
  </div>
</template>

<script lang="ts" setup>
const props: any = defineProps({
  icon: String
})
const emit = defineEmits(['click'])
</script>

<style lang="scss" scoped>
.icon {
  font-style: normal;
  display: block;
  width: 1em;
  height: 1em;
  background-size: cover;
  background-repeat: no-repeat;
}

.icon-button {
  display: inline-block;
  border: 1px solid #c0c0c0;
  padding: 0.6em;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  margin-right: 0.6em;
}

.icon-plus {
  background-image: url();
}

.icon-minus {
  background-image: url();
}

.icon-reset {
  background-image: url();
}
</style>
